<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>人员管理</title>

<style type="text/css">
.panel-body table td {
	border-top: 0px solid #ddd !important
}

</style>

<%@ include file="../common.jsp"%>
<script type="text/javascript" src="${path }/static/vender/jquery/jquery.pagination.js"></script>
<script type="text/javascript" src="${path }/static/vender/My97DatePicker/WdatePicker.js"></script>
</head>

<body>
	<jsp:include page="${pagePath }/header.jsp">
		<jsp:param value="main" name="active" />
	</jsp:include>

	<div class="container-fluid">
		<div class="row main">
           	<div class='alert alert-success  <c:if test="${msg == null}" > hide </c:if> ' role="alert">${msg }</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">查询</h3>
				</div>
				<div class="panel-body">
					<form id="queryForm" action="${path }/walker/list" method="post">
					<table class="table">
			            <thead>
			              <tr>
			              </tr>
			            </thead>
			            <tbody>
			              <tr>
			                <td class="pull-right">姓名</td>
			                <td><input type="text" class="form-control" name="realyName" value="${map.realyName }" placeholder="输入姓名"></td>
			                <td class="pull-right">健步组</td>
			                <td>
			                	<select name="groupId" class="form-control">
			                      	<option value="">全部 </option>
			                      	<c:forEach var="group" items="${groups }">
				                      	<option value="${group.id }"  <c:if test="${map.groupId == group.id }"> selected </c:if> >${group.groupName }</option>
			                      	</c:forEach> 
			                    </select>
			                </td>
			              </tr>
			              <tr>
			                <td colspan="4">
				                <div class="pull-right">
				                	<button type="submit" class="btn btn-info">&nbsp;查&nbsp;&nbsp;&nbsp;询&nbsp;</button>
				                	<button type="button" id="addWalkerId" class="btn btn-info">&nbsp;添加成员&nbsp;</button>
				                </div>
			                </td>
			              </tr>
			            </tbody>
			          </table>
					</form>
				</div>
			</div>
			<div class="table-responsive">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>#</th>
							<th>姓名</th>
							<th>性别</th>
							<th>所属分组</th>
							<th>创建时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="walker" items="${walkers }" varStatus="idx">
							<tr>
								<td>${idx.index+1 }</td>
								<td>${walker.realyName }</td>
								<td><c:if test="${walker.sex == \"0\" }">男</c:if> <c:if test="${walker.sex == \"1\" }">女</c:if></td>
								<td>${walker.walkerGroup.groupName }</td>
								<td><fmt:formatDate value="${walker.createTime }" pattern="yyyy-MM-dd HH:mm:ss" /></td>
								<td><a href="${path }/walker/doDel?id=${walker.id }" onclick="return confirm('确定删除吗？该成员步数信息将清空！')" class="btn btn-primary">删除</a> </td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<div id="addPanel" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	        <span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">添加成员</h4>
	      </div>
	      <div class="modal-body">
	        <form id="addWalkerForm">
              <div class="form-group">
                <label for="recipient-name" class="control-label">姓名:</label>
                <input type="text" class="form-control" check-type="required chinese" id="realyName">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">所属分组:</label>
                <select id="addGroupId" class="form-control">
                   	<c:forEach var="group" items="${groups }">
                    	<option value="${group.id }"  <c:if test="${map.groupId == group.id }"> selected </c:if> >${group.groupName }</option>
                   	</c:forEach> 
                 </select>
              </div>
              <div class="form-group">
                <label class="radio-inline">
				  <input type="radio" name="sex" checked value="0"> 男
				</label>
				<label class="radio-inline">
				  <input type="radio" name="sex" value="1"> 女
				</label>
              </div>
              <div class="form-group">
                <div id="msgDiv" class="alert alert-success" style="display:none;" role="alert"></div>
              </div>
            </form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button id="saveRectBtn" type="button" class="btn btn-primary">保存</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<jsp:include page="${pagePath }/paginator.jsp">
		<jsp:param name="form" value="#queryForm" />
	</jsp:include>

	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>

	<script type="text/javascript">
		$(function(){
			$("#addPanel").validation({reqmark:false,icon:false});
			
			$("#addWalkerId").click(function(){
				$("#addPanel").modal({backdrop: 'static', keyboard: false});
			});
			$("#saveRectBtn").click(function(){
				if($("#addPanel").valid()==false)
					return false;
				$.post("${path }/walker/doSave" , {
					realyName : $("#realyName").val(),
					sex : $("input[name='sex']:checked").val(),
					groupId : $("#addGroupId").val()
				}, function(data,status){
					$("#msgDiv").show().html(data.msg);
					$("#realyName").val('');
				});
			});
			$("button[role='delWalkerBtn']").click(function(){
				var id = $(this).attr("data");
				location.href = "${path }/walker/doDel?id="+id;
			});
		});
	</script>

</body>
</html>